<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>门票管理</title>
    <link rel="stylesheet" href="./css/bootstrap3/css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/layer/css/layer.css">
    <link rel="stylesheet" href="./css/bootstrap-table/css/bootstrap-table.min.css">
    <link rel="stylesheet" href="./css/bootstrap3/css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css">
    <link rel="stylesheet" href="./css/bootstrapvalidator/css/bootstrapValidator.min.css">
    <link rel="stylesheet" href="./css/select2/css/select2.min.css">
    <script src="./js/jquery-3.3.1.min.js"></script>
    <script src="./js/layer/js/layer.js"></script>
    <script src="./js/bootstrapvalidator/js/bootstrapValidator.min.js"></script>
    <script src="./js/bootstrap3/js/bootstrap.min.js"></script>
    <script src="./js/select2/js/select2.min.js"></script>
    <script src="./js/select2/js/i18n/zh-CN.js"></script>
    <script src="./js/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
    <script src="./js/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
    <script src="./js/bootstrap-table/js/bootstrap-table.min.js"></script>
    <script src="./js/bootstrap-table/js/bootstrap-table-zh-CN.js"></script>
    <script src="./js/bootstrap-table/js/tableExport.js"></script>
    <script src="./js/bootstrap-table/js/bootstrap-table-export.js"></script>

    <style>
        body {
            background: url("./img/cd_banner.png") no-repeat center center #042361;
            background-size: cover;
            background-attachment: fixed;
        }

        .table {
            color: snow
        }

        .nav {
            position: fixed;
            top: 10px;
            left: 30px;
            z-index: 1000;
        }

        .nav a {
            text-decoration: none;
            color: yellow;
            padding: 10px
        }

        .mt {
            margin-top: 50px;
            color: snow;

        }

        .table > tbody > tr:hover {
            color: black;
        }

        label.col-md-2.control-label.col-md-offset-2 {
            color: black;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="nav">
        <a href="./index.html">首页</a>
        <a href="#">门票管理</a>
        <a href="./order.html">订票</a>
    </div>


    <div class="bootstrap-table mt">
        <div id="toolbar" class="btn-group">
            <button id="btn_add" type="button" class="btn btn-default">
                <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
            </button>
            <button id="btn_edit" type="button" class="btn btn-default">
                <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
            </button>
            <button id="btn_delete" type="button" class="btn btn-default">
                <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
            </button>
        </div>
        <table id="tab">

        </table>

    </div>
    <!--        模态框-->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModal">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">门票添加</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" id="form">
                        <input type="hidden" name="tid" id="tid">
                        <div class="form-group">
                            <label for="" class="col-md-2 control-label col-md-offset-2">赛事</label>
                            <div class="col-md-4">
                                <input type="text" placeholder="请输入赛事名称" class="form-control" id="tname" name="tname">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="" class="col-md-2 control-label col-md-offset-2">开始时间</label>
                            <div class="col-md-4">
                                <!--  <input type="date" placeholder="请选择比赛时间" class="form-control" name="beginTime">-->
                                <input class="form-control" size="16" type="text" name="beginTime" id="beginTime"
                                       placeholder="选择时间日期">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="" class="col-md-2 control-label col-md-offset-2">总票数</label>
                            <div class="col-md-4">
                                <input type="number" placeholder="请输入总票数" class="form-control" name="totalCount"
                                       min="0" id="totalCount">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="" class="col-md-2 control-label col-md-offset-2">已订票数</label>
                            <div class="col-md-4">
                                <input type="number" placeholder="请输入已订票数" class="form-control" name="orderCount"
                                       min="0" id="orderCount">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="" class="col-md-2 control-label col-md-offset-2">票价</label>
                            <div class="col-md-4">
                                <input type="text" placeholder="请输入票价" class="form-control" id="price" name="price">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="" class="col-md-2 control-label col-md-offset-2">简介</label>
                            <div class="col-md-4">
                                <input type="text" placeholder="请输入简介" class="form-control" id="description"
                                       name="description">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="" class="col-md-2 control-label col-md-offset-2">场馆</label>
                            <div class="col-md-4">
                                <select id="mySelect02">
                                    <option></option>
                                </select>
                            </div>
                            <input type="hidden" name="s_t_id" id="s_t_id">
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="add">确定</button>
                </div>
            </div>
        </div>
    </div>
</div>
<script>

    $(function () {
        /*表格初始化*/
        $("#tab").bootstrapTable({
            toolbar: "#toolbar",
            showButtonIcons: true,
            classes: ["table", "table-borderless", "table-hover"],
            theadClasses: "thead-light",
            search: true,
            pagination: true,
            pageSize: 10,
            pageList: [5, 10, 15, 20],
            showColumns: true,                  //是否显示所有的列
            showRefresh: true,
            showToggle: true,
            uniqueId: "ID",
            ajax: function (request) {
                $.ajax({
                        type: "GET",
                        url: "/ticket?method=findAll",
                        dateType: "json",
                        success: function (data) {
                            request.success({
                                row: data
                            });
                            $('#tab').bootstrapTable('load', data);
                        }
                    }
                )
            },
            columns: [
                {
                    checkbox: true
                },
                {
                    field: "id",
                    title: "序号",
                    formatter: function (value, row, index) {
                        return index + 1;
                    }

                }, {
                    field: "tname",
                    title: "赛事"


                }, {
                    field: "beginTime",
                    title: "开始时间"

                }, {
                    field: "totalCount",
                    title: "门票数量"

                }, {
                    field: "remainCount",
                    title: "剩余数量",
                    formatter: function (value, row, index) {
                        return row.totalCount - row.orderCount;
                    }
                }, {
                    field: "price",
                    title: "票价",
                }, {
                    field: "sname",
                    title: "体育馆",
                    formatter: function (value, row, index) {
                        return row.stadia.sname;
                    }
                }],
            //>>>>>>>>>>>>>>导出excel表格设置
            showExport:true,              //是否显示导出按钮(此方法是自己写的目的是判断终端是电脑还是手机,电脑则返回true,手机返回falsee,手机不显示按钮)
            exportDataType:"all",              //basic', 'all', 'selected'.
            exportTypes:['excel', 'xlsx'],	    //导出类型
            buttonsAlign:"right",  //按钮位置
            //exportButton: $('#btn_export'),     //为按钮btn_export  绑定导出事件  自定义导出按钮(可以不用)
            Icons:'glyphicon glyphicon-export', //导出图标
            exportOptions:{
                //ignoreColumn: [0,0],            //忽略某一列的索引
                fileName: '赛事数据导出',              //文件名称设置
                worksheetName: '比赛列表',          //表格工作区名称
                tableName: '比赛数据',
            },
            //导出excel表格设置
        });
        /*删除功能*/
        $("#btn_delete").click(function (data) {
            let list = $("#tab").bootstrapTable("getSelections");
            let tid = null;
            if (list.length < 1) {
                layer.msg("请勾选要删除的门票列！", {icon: 7});
            } else {
                let tids = new Array();
                /* for (let index in list){
                     tids.push(list[index].tid);
                 }*/
                for (let value of list) {
                    tids.push(value.tid);
                }
                console.log(tids);
                layer.confirm("确定删除此门票信息？", {btn: ["确定", "取消"], icon: 3, title: '提示'}, function (index) {
                    $.ajax({
                        url: "/ticket?method=delete",
                        type: "get",
                        data: {tids: tids},
                        traditional: true,
                        success: function (data) {

                            if (data.flag) {
                                layer.msg("删除成功", {icon: 6, time: 1000});
                                $("#tab").bootstrapTable("refresh");
                            } else {
                                layer.msg("删除失败", {icon: 5});
                            }
                        },
                        error: function (data) {
                            layer.msg("删除失败", {icon: 5});
                        }
                    })
                });
            }
        });
        formValidator();
        $("#myModal").on("hidden.bs.modal", function () {
            //重置表单
            $("#form").get(0).reset();
            //移除上次的校验配置
            $("#form").data('bootstrapValidator').destroy();
            $('#form').data('bootstrapValidator', null);
            formValidator();
        });
        /*非空校验*/
        /*校验*/
        function formValidator() {
            $("#form").bootstrapValidator({
                feedbackIcons: {
                    valid: 'glyphicon glyphicon-ok',
                    invalid: 'glyphicon glyphicon-remove',
                    validating: 'glyphicon glyphicon-refresh'
                },
                fields: {
                    tname: {
                        message: "赛事输入有误",
                        validators: {
                            notEmpty: {
                                message: "赛事不能为空",
                            }
                        }
                    },
                    totalCount: {
                        message: "门票数量输入有误",
                        validators: {
                            notEmpty: {
                                message: "门票数不能为空",
                            }

                        }
                    },
                    orderCount: {
                        message: "已订数量输入有误",
                        validators: {
                            notEmpty: {
                                message: "已订数不能为空",
                            },
                            callback: {
                                message: '已订票数要小于等于总票数',
                                callback: function () {
                                    let tcount = $('#totalCount').val();
                                    let ocount = $('#orderCount').val();
                                    return parseInt(tcount) >= parseInt(ocount);
                                }
                            },
                            blur: {
                                message: "失去焦点事件",
                            }
                        }
                    },
                    price: {
                        message: "票价输入有误",
                        validators: {
                            notEmpty: {
                                message: "票价不能为空",
                            },
                            regexp: {
                                regexp: /(^[1-9]\d*(\.\d{1,2})?$)|(^0(\.\d{1,2})?$)/,
                                message: "票价为正数"
                            }
                        }
                    },

                },

            });
        }
        /*初始化时间插件*/
        $('#beginTime').datetimepicker({
            language: 'zh-CN',
            weekStart: 1, //一周从哪一天开始
            todayBtn: true,//组件的底部显示一个 "Today" 按钮用以选择当前日期
            autoclose: true,//当选择一个日期之后立即关闭此日期时间选择器。
            todayHighlight: true,//如果为true, 高亮当前日期
            startView: 2,
            minView: 2,
            format: 'yyyy-mm-dd',
            startDate: new Date()//开始时间
        });
        /*加载体育馆下拉列表*/
        $.ajax({
            type: "GET",
            url: "/stadia?method=findAll",
            success: function (data) {
                datas = data;
                var dataArray = [];
                $.each(datas, function (i, val) {
                    dataArray.push({id: val.sid, text: val.sname});
                });
                console.log(dataArray);
                $("#mySelect02").select2({
                    language: "zh-CN",
                    placeholder: "请选择场馆",
                    width: 200,
                    data: dataArray
                })
            }
        });
        /*添加门票功能*/
        $("#btn_add").click(function () {
            /*清空select2*/
            $('#mySelect02').val(null).trigger('change');//position为自己的select控件的id值
            /*显示模态框*/
            $('#myModal').modal('show');
            $("#myModalLabel").html("门票添加");
            $("#add").unbind();
            /*确定添加*/
            $("#add").click(function () {
                $("#form").bootstrapValidator('validate');//提交验证
                if ($("#form").data('bootstrapValidator').isValid()) {//获取验证结果，如果成功，执行下面代码
                    //关闭模态框
                    $("#myModal").modal("hide");
                    //向隐藏input中赋值
                    let s_t_id = $("#mySelect02").select2("val");
                    console.log(s_t_id);
                    $("#s_t_id").val(s_t_id);
                    //校验通过，提交表单
                    $.ajax({
                        type: "get",
                        url: "/ticket?method=add",
                        data: $("#form").serialize(),
                        success: function (data) {
                            if (data.flag) {
                                layer.msg("添加成功", {icon: 6, time: 1000});
                                $("#tab").bootstrapTable('refresh');
                            }
                        },
                        error: function () {
                            layer.msg("添加失败", {icon: 5});
                        }
                    })
                }
            })
        });
        /*修改门票信息*/
        $("#btn_edit").click(function () {
            //先获取修改行
            let list = $("#tab").bootstrapTable("getSelections");
            let tid = null;
            if (list.length != 1) {
                layer.msg("请勾选一项！", {icon: 7});
            } else {
                /*清空select2*/
                $('#mySelect02').val(null).trigger('change');//position为自己的select控件的id值
                //    打开模态框，并且填充值
                $('#myModal').modal('show');
                $("#myModalLabel").html("修改门票信息");
                $("#tid").val(list[0].tid);
                $("#tname").val(list[0].tname);
                $("#beginTime").val(list[0].beginTime);
                $("#totalCount").val(list[0].totalCount);
                $("#orderCount").val(list[0].orderCount);
                $("#price").val(list[0].price);
                $("#description").val(list[0].description);
                $("#s_t_id").val(list[0].s_t_id);
                $("#select2-mySelect02-container").html(list[0].stadia.sname);
                /*确定添加*/
                $("#add").unbind();
                $("#add").click(function () {
                    $("#form").bootstrapValidator('validate');//提交验证
                    if ($("#form").data('bootstrapValidator').isValid()) {//获取验证结果，如果成功，执行下面代码
                        //关闭模态框
                        $("#myModal").modal("hide");
                        //向隐藏input中赋值
                        let s_t_id = $("#mySelect02").select2("val");
                        console.log(s_t_id);
                        $("#s_t_id").val(s_t_id);
                        //校验通过，提交表单
                        $.ajax({
                            type: "get",
                            url: "/ticket?method=update",
                            data: $("#form").serialize(),
                            success: function (data) {
                                if (data.flag) {
                                    layer.msg("修改成功", {icon: 6, time: 1000});
                                    $("#tab").bootstrapTable('refresh');
                                }
                            },
                            error: function () {
                                layer.msg("修改失败", {icon: 5});
                            }
                        })
                    }
                })


            }
        })
    })
</script>
</body>
</html>